<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <title>login</title>
</head>
<body>
    <div id="login">
        <img src="/Public/img/w.png" class="banner" alt="">
        <div class="login">
            <p class="title">账号登陆</p>
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="账号">
                    <el-input v-model="form.id"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input type='password' v-model="form.pas"></el-input>
                </el-form-item>
                <el-button type="primary" @click="onSubmit">登陆</el-button>
            </el-form>
        </div>
    </div>
    <script>
        let forms = {};
        new Vue({
            el: '#login',
            data() {
                return {
                    form: {
                        id: '',
                        pas: ''
                    }
                }
            },
            mounted() {},
            methods: {
                onSubmit() {
                    if (this.form.id == '') {
                        this.$message({
                            message: '账号不能为空',
                            type: 'warning'
                        });
                        return
                    }
                    if (this.form.pas == '') {
                        this.$message({
                            message: '密码不能为空',
                            type: 'warning'
                        });
                        return
                    }
                    forms = this.form
                    window.location.href="/kcadmin/Public/login?username="+this.form.id+"&password="+this.form.pas+"&TOKEN_T=1598483483"
                    // alert(JSON.stringify(this.form))
                }

            }
        })
    </script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .banner {
            width: 80%;
            max-width: 1415px;
            height: 100vh;
        }

        .login {
            width: 500px;
            height: 416px;
            background: #292B33;
            position: absolute;
            top: calc(50% - 230px);
            right: 50px;
            border-radius: 6px;
        }

        .title {
            width: 100%;
            height: 80px;
            line-height: 80px;
            text-align: center;
            font-size: 28px;
            color: #fff;
            border-bottom: 2px solid #fff;
        }

        .el-form-item {
            background: #fff;
            width: 92%;
            height: 70px;
            margin: 26px auto 0 auto;
            line-height: 70px;
            border-radius: 8px;
        }

        .el-button--primary {
            width: 92%;
            height: 70px;
            background: rgba(96, 177, 243, 1);
            font-size: 20px;
            margin: 26px 4%;

        }

        .el-input__inner {
            height: 70px;
            font-size: 18px;
            border: none;
        }

        .el-form-item__label {
            height: 70px;
            line-height: 70px;
            font-size: 18px;
            font-weight: 800;
            position: relative;
            padding-right: 20px;
            text-indent: -5px;
        }

        .el-form-item__label::after {
            content: '';
            width: 3px;
            height: 22px;
            background: linear-gradient(180deg, rgba(242, 222, 193, 1) 0%, rgba(231, 198, 156, 1) 100%);
            position: absolute;
            top: 24px;
            right: 0;

        }
    </style>
</body>

</html>